<template>
  <div class="roadNetPage">
    <div class="roadLeft">
      <div class="trafficBlock">
        <div class="chart">
          <dv-charts :option="trafficConfig" style="width: 100%; height: 100%" />
        </div>
        <div class="title">拥堵指数</div>
      </div>
      <div class="trafficLine">
        <dv-charts :option="parkOption" style="width: 100%; height: 100%" />
      </div>
      <div class="header headerBlue">全区道路拥堵监控</div>
      <div class="roadPoster"></div>
      <div class="header headerRed">拥堵路段统计</div>
      <div class="trafficRoad clearfix">
        <div
          v-for="item of roadList"
          :key="item.id"
          class="roadItem"
        >
          <div class="name">{{ item.name }}</div>
          <div class="value">{{ item.value }}<span v-if="item.unit">{{ item.unit }}</span></div>
        </div>
      </div>
    </div>
    <div class="roadMiddle"></div>
    <div class="roadRight">
      <div class="header headerRed">主要高速路运行情况</div>
      <div class="highwayTable">
        <dv-scroll-board
          :config="highwayTableConfig"
          style="width: 100%; height: 100%"
        />
      </div>
      <div class="header headerRed">城区主干道运行情况</div>
      <div class="mainwayTable">
        <dv-scroll-board
          :config="mainwayTableConfig"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      trafficConfig: {
        series: [
          {
            type: "gauge",
            data: [
              {
                name: "itemA",
                value: 90,
                gradient: ["#4be828", "#ffc000", "#ff4200", "#8f0021"],
              },
            ],
            axisLabel: {
              formatter: "{value}%",
            },
            animationCurve: "easeOutBounce",
          },
        ],
      },
      parkOption: {
        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "15%",
        },
        xAxis: {
          data: ["00:00", "07:00", "14:00", "21:00"],
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
        },
        yAxis: {
          data: "value",
          axisLabel: {
            style: {
              fill: "#fff",
              fontSize: 10,
            },
          },
          splitLine: {
            style: {
              stroke: "#14344d",
            },
          },
        },
        series: [
          {
            name: "进场",
            data: [120, 223, 190, 210],
            type: "line",
            lineArea: {
              show: true,
              gradient: ['rgba(47, 254, 158, 0.6)', 'rgba(47, 254, 158, 0)']
            },
          },
          {
            name: "出厂",
            data: [80, 130, 140, 100],
            type: "line",
            lineArea: {
              show: true,
              gradient: ['rgba(41, 160, 255, 0.6)', 'rgba(41, 160, 255, 0)']
            },
          },
        ],
      },
      roadList: [
        { id:1, name: '监控路段', value: 115, unit: '' },
        { id:2, name: '严重拥堵', value: 14, unit: '' },
        { id:3, name: '一般拥堵', value: 2, unit: '' },
        { id:4, name: '平均时速', value: 31, unit: 'km/h' },
        { id:5, name: '单点干预', value: 3, unit: '' },
        { id:6, name: '正在干预', value: 1, unit: '' },
      ],
      highwayTableConfig: {
        header: [
          "<span style='text-align:center'>道路编号</span>",
          "<span style='text-align:center'>道路名称</span>",
          "<span style='text-align:center'>交通指数</span>",
        ],
        rowNum: 6,
        headerBGC: "none",
        oddRowBGC: "none",
        evenRowBGC: "#1a3c70",
        align: ["center", "center", "center"],
        data: [
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
          ["G6", "京藏高速", "8.7"],
        ],
      },
      mainwayTableConfig: {
        header: [
          "<span style='text-align:center'>方向</span>",
          "<span style='text-align:center'>道路名称</span>",
          "<span style='text-align:center'>交通指数</span>",
        ],
        rowNum: 6,
        headerBGC: "none",
        oddRowBGC: "none",
        evenRowBGC: "#1a3c70",
        align: ["center", "center", "center"],
        data: [
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
          ["东", "二环路", "8.7"],
        ],
      }
    };
  },
  methods: {},
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
@import "../../style//roadNetwork.scss";
</style>
